<script setup lang="ts">
import {
  Button, CellGroup, Field, Form,
  Loading,
  showFailToast,
  Tag,
} from 'vant';
import { onMounted, type PropType } from 'vue';

import useAppConfg from '../../AppConfig/hooks/useAppConfg';
import type { PlatformTypeItem } from '../../AppConfig/models/PlatformConfig';
import useTransConfig from '../hooks/useTransConfig';
import useFaceValueList from '../hooks/useTransFaceValue';
import useTransName from '../hooks/useTransName';
import useTransOrder from '../hooks/useTransOrder';
import type TransOrderItem from '../models/TransOrderItem';
import type { TransFaceValueItem, TransNameItem } from '../models/TransSelectQuery';
import { ModalFaceValueList, ModalPlatformType } from '.';
import SearchCard from './SearchCard.vue';

const props = defineProps({
  scope: {
    type: Object as PropType<{
      record: TransOrderItem,
      reload?: () => void,
    }>,
    default: () => ({}),
  },
  hide: {
    type: Function as PropType<() => void>,
    default: () => { },
  },
});

const {
  statePlatform,
  platformMap,
  fetchSyncList,
} = useAppConfg();

const {
  params: paramsName,
  stateAll: stateAllName,
  fetchAllData: fetchAllDataName,
} = useTransName();

const {
  params: paramsValueFace,
  fetchData: fetchValueFace,
  state: stateValueFace,
} = useFaceValueList();

const {
  transRef,
  params: paramsOrder,
  state: stateOrder,
  fetchData: fetchOrder,
} = useTransOrder();

const {
  params, state,
  handleTransform,
} = useTransConfig();

onMounted(async () => {
  params.value.platformType = paramsName.value.platformType;
  params.value.orderNoList = [props.scope.record.orderNo];
  await Promise.all([
    fetchSyncList(),
    fetchAllDataName(),
  ]);
  paramsOrder.value.userName = props.scope.record.userName;
});

const handleShowCardModal = () => {
  ModalPlatformType.show({
    title: '选择平台',
    options: statePlatform.value.data,
    value: paramsName.value.platformType,
    emit: async (option: PlatformTypeItem) => {
      paramsName.value.platformType = option.platformType;
      paramsName.value.cardProductName = '';
      paramsOrder.value.faceValue = 0;
      await fetchAllDataName();
      //
      params.value.platformType = option.platformType;
    },
  });
};

const handleNameChange = async (prod: TransNameItem) => {
  paramsName.value.cardProductName = prod.cardProductName;
  paramsValueFace.value.cardProductId = prod.cardProductId;
  await fetchValueFace();
  paramsOrder.value.cardProductId = prod.cardProductId;
  paramsOrder.value.faceValue = 0;
  //
  params.value.cardProductId = prod.cardProductId;
};

const handleClear = () => {
  stateValueFace.value.data = [];
  paramsOrder.value.faceValue = 0;
};

const handleShowFaceModal = () => {
  if (!stateValueFace.value.data.length) {
    showFailToast('请先选择产品');
    return;
  }
  ModalFaceValueList.show({
    title: '选择面值',
    options: stateValueFace.value.data,
    value: paramsOrder.value.faceValue,
    emit: async (option: TransFaceValueItem) => {
      paramsOrder.value.faceValue = option.faceValue;
      await fetchOrder();
      //
      params.value.faceValue = option.faceValue;
    },
  });
};

const handleTrans = async () => {
  try {
    if (!stateValueFace.value.data.length) {
      showFailToast('请先选择产品');
      return;
    }
    if (!params.value.faceValue) {
      showFailToast('请先选择面值');
      return;
    }
    await transRef.value.validate();
    await handleTransform();
    props.scope.reload?.();
    props.hide();
  } catch (error) {
    //
  }
};
</script>

<template>
  <div class="trans-modal">
    <Form ref="transRef">
      <CellGroup>
        <Field
          :model-value="platformMap[paramsName.platformType]"
          is-link readonly clickable label="平台"
          name="syncType" placeholder="请选择平台"
          :disabled="statePlatform.loading"
          :rules="[{ required: true, message: '请选择平台' }]"
          @click="handleShowCardModal">
          <template #right-icon>
            <Tag type="primary">
              <span
                v-if="!statePlatform.loading">平台</span>
              <Loading
                v-if="statePlatform.loading"
                :size="12" />
            </Tag>
          </template>
        </Field>
        <SearchCard name="cardProductName"
          v-model:value="paramsName.cardProductName"
          @change="handleNameChange"
          @clear="handleClear"
          :cur-platform="paramsName.platformType"
          :state="stateAllName" />
        <Field v-model="paramsOrder.faceValue"
          is-link readonly clickable
          name="faceValue" label="面值"
          placeholder="请选择面值"
          :rules="[{ required: true, message: '请选择面值' }]"
          @click="handleShowFaceModal">
          <template #right-icon>
            <Tag type="primary">
              <span
                v-if="!stateValueFace.loading">元</span>
              <Loading
                v-if="stateValueFace.loading"
                :size="12" />
            </Tag>
          </template>
        </Field>
      </CellGroup>
    </Form>
  </div>
  <div
    class="footer van-hairline--top van-dialog__footer">
    <Button @click="props.hide" size="large"
      class="van-button van-button--default van-button--large van-dialog__cancel">取消</Button>
    <Button type="default" size="large" :class="[
      'van-button', 'van-button--default', 'van-button--large', 'van-dialog__confirm',
      'van-hairline--left'
    ]" @click="handleTrans" :loading="state.loading
      || stateAllName.loading
      || stateValueFace.loading
      || stateOrder.loading
      ">确定
    </Button>
  </div>
</template>
<style lang="less" scoped>
.trans-modal {
  display: flex;
  flex-direction: column;
  padding: 8px 16px;
  max-height: 650px;
  overflow-y: auto;

  .plat {
    display: flex;
    flex-direction: column;

    .title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .content {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .plat {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100px;
        height: 100px;
        border: 1px solid #ccc;
        border-radius: 10px;
        cursor: pointer;

        .title {
          font-size: 14px;
          font-weight: 600;
        }
      }
    }
  }

  .modal-code {
    border: 1px solid #ccc;
    border-radius: 10px;
  }
}
</style>
